<template>
    <div>
        <div class="charBox" v-if="login">
            <div class="left">
                <div class="item" v-for="(item, index) in userList" :key="index">
                    <p>{{item}}</p>
                </div>
            </div>
            <div class="right">
                <div class="infoSpace" ref="infoSpace">
                    <div v-for="(item, index) in infoSpace" :key="index" >
                        <div class="other" v-if="item.user != username">
                            <span class="user">{{item.user}}</span>: <span class="info">{{item.info}}</span>
                        </div>
                        <div class="me" v-else >
                            <span class="info">{{item.info}}</span> :<span>我</span>
                        </div>
                    </div>
                </div>
                <div class="inputSpace">
                    <a-textarea v-model="info" @keydown.enter="sendInfo" placeholder="Basic usage" :autosize="{ minRows: 5, maxRows: 5 }" />
                        <a-button @click="sendInfo" class="sendBtn" type="primary">发送</a-button>
                </div>
                <div>当前聊天人数：{{sum}}</div>
            </div>
        </div>
        <div class="loginBox" v-else >
            <div class="box">
                <a-input v-model="username" style="margin-bottom:20px;" placeholder="default size" />
                <a-input-password v-model="password" style="margin-bottom:20px;" placeholder="input password" />
                <a-button @click="loginUser" class="sendBtn" type="primary">登录</a-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: null,
            password: '',
            userList: [],
            info: '',
            sum: 0,
            infoSpace: [],
            login: false,
        }
    },
    sockets: {
        // 属性名是用来给服务端socket触发的事件名
        login: function(sum){
            this.$nextTick(() => {
                this.login = true;
                this.sum = sum;
            })
            console.log(this,sum);
        },
        upUserList: function(userList) {
            this.userList = userList;
            console.log(this.username);
        },
        message: function(obj) {
            console.log(obj.msg);
        },
        receive: function(infoSpace){
            this.$nextTick(() => {
                this.infoSpace = infoSpace;
                setTimeout(() => {
                    this.$refs['infoSpace'].scrollTop = this.$refs['infoSpace'].scrollHeight+100;
                },0)
            })
        }
    },
    methods: {
        sendInfo() {
            this.$socket.emit('send', {user: this.username, info: this.info });
            this.info = ''
        },
        loginUser() {
            // 触发服务端的login
            this.$socket.emit('login', {
                user: this.username,
                pwd: this.password,
            })
        }
    },
    mounted() {
        window.addEventListener('unload', () => {
            console.log(this.username)
            this.$socket.emit('close', this.username)
        });
        window.vue = this;
    },
    destroyed () {
        console.log(this.username)
        this.$socket.emit('close', this.username)
    }
}
</script>

<style>
.charBox{
    position: relative;
    height: 600px;
}
.charBox .left{
    width: 30%;
    height: 100%;
    float: left;
    padding: 10px;
}
.charBox .left .item{
    width: 100%;
    height: 20px;
    background-color: white;
    border: 1px solid black;
    margin-bottom: 5px;
}
.charBox .right{
    width: 70%;
    height: 100%;
    float: left;
    padding: 20px;
}
.charBox .right .infoSpace{
    height: 70%;
    overflow:auto;
}
.charBox .right .infoSpace .other{
    text-align: left;
    margin-right: 40px;
    background-color: white;
    margin-bottom: 10px;
}
.charBox .right .infoSpace .me{
    text-align: right;
    margin-left: 40px;
    background-color: green;
    margin-bottom: 10px;
}

.loginBox{
    margin: 200px 200px;
}
.loginBox .box{
    border: 1px solid black;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
}
</style>